<template>
        <div>
            <h1>用户详情</h1>
           <div class="user">
             <div>
                <img :src="user.avatar" alt="">
            </div>
            <div>
                <p>用户 ID: {{ user.id }}</p>
                <p>用户名: {{ user.username }}</p>
                <p>姓名: {{ user.name }}</p>
                <p>邮箱: {{ user.email }}</p>
                </div>
           </div>
        </div>
</template>

<script setup>
    import {ref,onMounted} from "vue";
// 导入当前路由钩子
import {useRoute} from "vue-router"
// 调用钩子 获得当前路由信息
    const route=useRoute()
    const user=ref("")
    const query=()=>{
    fetch(`http://localhost:3000/users/${route.query.pid}`)
        .then(res=>res.json())
        .then(data=>{
            user.value=data
        })
    }
    onMounted(()=>{
        query()
    })
</script>

<style scoped>
    img{
        width: 100px;
        height: 100px;
        border-radius: 100%;
    }
    .user{
        display: flex;
        justify-content: center;
       
        
    }
</style>